<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
        <style>
            #wrapper {
                margin: 50px auto;
                position: relative;
                border: 10px solid black;
                height: 500px;
                width: 1000px;
            }

            .item {
                width: 200px;
                height: 100px;
                cursor: default;
                background-color: white;
                border: 1px solid black;
                position: absolute;
                user-select: none;
                border-radius: 4px;
                border: 1px solid #222;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            }

            .item header {
                background-color: #ccc;
                color: black;
                padding: 5px 10px;
            }

            .item main {
                padding: 5px 10px;
            }

            .item.dragging {
                opacity: 0.8;
            }
        </style>
    </head>
    <body ontouchmove="return false;">
        <div id="wrapper">
            <div id="demo1" class="item">
                <header>demo1</header>
                <main>drag1</main>
            </div>

            <div id="demo2" class="item" style="left: 300px">
                <header>demo2</header>
                <main>drag2</main>
            </div>
        </div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>
